<template>
	<div class="u-page-custom tpink-page-bgcolor">
		<u-navbar :title="Navbar.title" :custom-back="comeback" :background="Navbar.background" :border-bottom="false" :title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
		<div class="enterprise-info-top">
			<div class="u-pb-15 enterprise-info-top-item">
				<div class="u-flex-1 u-col-center">
					<div class="os-job-name">
						{{EnterpriseInfo.enterpriseInfo.enterpriseName?EnterpriseInfo.enterpriseInfo.enterpriseName:''}}
					</div>
					<div class="u-fz-14">
						ID：{{EnterpriseInfo.enterpriseInfo.enterpriseNo?EnterpriseInfo.enterpriseInfo.enterpriseNo:''}}
					</div>
					<div class="u-flex u-pt-10">
						<div class="u-flex">
							<u-icon name="map" size="30"></u-icon>
							<div class="u-pl-5">
								{{EnterpriseInfo.enterpriseInfo.province?EnterpriseInfo.enterpriseInfo.province:''}} {{EnterpriseInfo.enterpriseInfo.city?EnterpriseInfo.enterpriseInfo.city:''}}
							</div>
						</div>
						<div class="u-pl-20 u-flex">
							<u-icon name="calendar" size="30"></u-icon>
							<div class="u-pl-5">成立{{getYearsByCreateTime(EnterpriseInfo.enterpriseInfo.establishmentDate)}}</div>
						</div>
					</div>
				</div>
				<div class="avatar-shadow">
					<u-avatar size="130" mode="square" bg-color="#ffffff" :src="EnterpriseInfo.enterpriseInfo.avatar"></u-avatar>
				</div>
			</div>
			<!-- 旗下品牌 -->
			<div v-if="BrandGoodsList && BrandGoodsList.length>0">
				<div>
					<span class="brand-title">旗下品牌</span>
					<span class="brand-text">{{EnterpriseInfo.relevancyItemDto.brandList.length>0?EnterpriseInfo.relevancyItemDto.brandList.join(' '):''}}</span>
				</div>
				<div class="brand-content">
					<div class="u-mr-10 brand-content-item" v-for="(item,index) in BrandGoodsList" :key="index"
						@click="toGoodsDetails(item)">
						<div class="u-pb-5">
							<u-image width="200rpx" height="200rpx" :src="getFirstImg(item.goodsImages)"></u-image>
						</div>
						<div class="brand-goods-title">
							{{ item.goodsName?item.goodsName:'' }}
						</div>
						<div class="u-fz-15 u-font-bold u-text-center tpink-btn-color u-pb-5">
							&yen;{{ item.discountPrice?item.discountPrice:'' }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="u-pt-5"></div>
		<div class="tpink-page-content-bgcolor">
			<div style="padding: 50rpx 40rpx;">
				<div style="font-weight: bold;font-size: 32rpx;">
					公司介绍
				</div>
				<div class="u-fz-15 u-pt-10">
					{{EnterpriseInfo.enterpriseInfo.introduction?EnterpriseInfo.enterpriseInfo.introduction:'暂无'}}
				</div>
			</div>
			<div style="padding: 0rpx 40rpx">
				<div style="font-weight: bold;font-size: 32rpx;">
					公司地址
				</div>
				<div class="u-fz-15 u-pt-10">
					{{EnterpriseInfo.enterpriseInfo.registeredAddress?EnterpriseInfo.enterpriseInfo.registeredAddress:'暂无'}}
				</div>
			</div>
			<div class="info-box">
				<div class="title">
					工商信息
				</div>
				<div class="info-item">
					<div class="info-title">法定代表人</div>
					<div class="info-content">{{EnterpriseInfo.enterpriseInfo.legalPerson?EnterpriseInfo.enterpriseInfo.legalPerson:''}}</div>
				</div>
				<div class="info-item">
					<div class="info-title">注册资本</div>
					<div class="info-content">{{EnterpriseInfo.enterpriseInfo.registeredCapital?EnterpriseInfo.enterpriseInfo.registeredCapital:''}}</div>
				</div>
				<div class="info-item">
					<div class="info-title">成立时间</div>
					<div class="info-content">{{EnterpriseInfo.enterpriseInfo.establishmentDate?formatDate(EnterpriseInfo.enterpriseInfo.establishmentDate):''}}</div>
				</div>
				<div class="info-item">
					<div class="info-title">统一信用编码</div>
					<div class="info-content">{{EnterpriseInfo.enterpriseInfo.organizationCode?EnterpriseInfo.enterpriseInfo.organizationCode:''}}</div>
				</div>
				<div class="info-item">
					<div class="info-title">企业类型</div>
					<div class="info-content">{{EnterpriseInfo.enterpriseInfo.registrationType?EnterpriseInfo.enterpriseInfo.registrationType:''}}</div>
				</div>
				<div class="info-item">
					<div class="info-title">所属行业</div>
					<div class="info-content">{{EnterpriseInfo.enterpriseInfo.industry?EnterpriseInfo.enterpriseInfo.industry:''}}</div>
				</div>
			</div>
		</div>
		<div class="u-mt-10 similar-enterprise tpink-page-content-bgcolor" v-if="SimilarEnterpriseList && SimilarEnterpriseList.length>0">
			<div style="font-weight: bold;font-size: 32rpx;padding-left: 40rpx;">
				相似企业
			</div>
			<swiper class="swiper" circular :indicator-dots="true" indicator-active-color="#eb5468" indicator-color="#f1d7e0" :autoplay="true" style="height: 370rpx;border-radius: 20rpx;">
				<swiper-item v-for="(item,index) in SimilarEnterpriseList" :key="index">
					<div class="similar-enterprise-top" @click="toEPDetails(item)">
						<div class="u-pb-15 similar-enterprise-top-item">
							<div class="u-flex-1 u-col-center">
								<div class="u-flex u-col-center u-flex-1">
									<div :class="isEnoughLength(item.enterpriseInfo.enterpriseName)?'os-job-name':'os-job-name2'">
										{{item.enterpriseInfo.enterpriseName?item.enterpriseInfo.enterpriseName:''}}
									</div>
									<div :class="isEnoughLength(item.enterpriseInfo.enterpriseName)?'u-pl-5':''">
										<u-image width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel1.png" v-if="item.enterpriseInfo.enterpriseTop > 0"></u-image>
										<u-image width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel2.png" v-else></u-image>
									</div>
								</div>
								<div class="u-flex u-pt-5">
									<div class="u-flex">
										<u-icon name="map" size="30"></u-icon>
										<div class="u-pl-5">
											{{item.enterpriseInfo.province?item.enterpriseInfo.province:''}} {{item.enterpriseInfo.city?item.enterpriseInfo.city:''}}
										</div>
									</div>
									<div class="u-pl-20 u-flex">
										<u-icon name="calendar" size="30"></u-icon>
										<div class="u-pl-5">成立{{getYearsByCreateTime(item.enterpriseInfo.establishmentDate)}}</div>
									</div>
								</div>
								<div class="u-pt-5 industry">
									{{item.enterpriseInfo.industry?item.enterpriseInfo.industry:''}}
								</div>
							</div>
							<div class="avatar-shadow">
								<u-avatar size="130" mode="square" bg-color="#ffffff" :src="item.enterpriseInfo.avatar"></u-avatar>
							</div>
						</div>
						<div class="divider-line"></div>
						<div class="u-pt-10 u-pb-5 u-flex">
							<div>
								旗下品牌
							</div>
							<div class="u-pl-10 brand-list">
								{{item.relevancyItemDto.brandList.length>0?item.relevancyItemDto.brandList.join(' '):'暂未入驻'}}
							</div>
						</div>
					</div>
				</swiper-item>
			</swiper>
		</div>
	</div>
</template>

<script>
export default {

  data() {
    return {
		userId: '',
		EnterpriseInfo: {},
		SimilarEnterpriseList: [],//相似企业列表
		BrandGoodsList: [],//品牌商品列表
		Navbar: {
			title: '企业详情',
			background: {
				background: '#f1d7e0'
			}
		},
	}
  },

  mounted() {

  },

  onShow() {},

  onPullDownRefresh() {
      // 停止Loading
      uni.stopPullDownRefresh();
  },

  onReachBottom() {
  },

  onLoad(options) {
	  if(this.isNotNull(options.userId)){
		  this.userId = options.userId
		  this.initEnterpriseInfo()
	  }
  },

  methods: {
		/** 
		 * 初始化企业详情
		 */
		async initEnterpriseInfo() {
			let result = await this.$u.api.unifyMiniRestGet({
				systemid: "meily",
				url: "/enterprise/details/info/" + this.userId,
				loading: true
			});
			if (result.code == 200) {
				this.EnterpriseInfo = result.data
				this.getBrandGoodsList()
				this.getSimilarEnterpriseList()
			}
		},

		/** 
		 * 获取相似企业数据
		 */
		 async getSimilarEnterpriseList() {
			let result = await this.$u.api.unifyMiniRest({
				systemid: "meily",
				url: "/enterprise/page/similar/list",
				enterpriseNo: this.EnterpriseInfo.enterpriseInfo.enterpriseNo,
				industry: this.EnterpriseInfo.enterpriseInfo.industry,
				randomQuantity: 5,
				loading: true
			});
			if (result.code == 200) {
				this.SimilarEnterpriseList = result.data
			}
		},

		/** 
		 * 获取品牌旗下商品数据
		 */
		 async getBrandGoodsList() {
			let result = await this.$u.api.unifyMiniRest({
				systemid: "meily",
				url: "/enterprise/page/associate/brand/list",
				enterpriseNo: this.EnterpriseInfo.enterpriseInfo.enterpriseNo,
				loading: true
			});
			if (result.code == 200) {
				this.BrandGoodsList = result.rows
			}
		},

		/**
		 * 跳转到商品详情
		 */
		async toGoodsDetails(item) {
			// 跳转到销售机会页面
			this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId);
		},

		/** 
		 * 跳转到企业主页
		 */
		toEPDetails(item) {
			this.$u.route('pages_tabbar_contact/index_contact/EnterpriseInfo?userId=' + item.enterpriseInfo.userId + '&enterpriseNo=' + item.enterpriseInfo.enterpriseNo)
		},

		/** 
		 * 根据公司名称的长度计算是否在范围内
		 */
		isEnoughLength(name) {
			return this.$u.test.rangeLength(name, [0, 15])
		},

		//根据日期参数返回距离今天是多少年，如果不够一年则返回月份数的函数
		getYearsByCreateTime(createTime){
			const date = new Date(createTime)
			const today = new Date()
			const diffInMilliseconds = today - date
			const diffInYears = parseInt(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365))
			const diffInMonths = parseInt((diffInMilliseconds % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30))
			if (diffInYears >= 1) {
				return diffInYears + "年"
			} else {
				return diffInMonths + "个月"
			}
		},

		//将日期的横杠替换成斜杠
		formatDate(date){
			return date.replace(/-/g, '/')
		},
		
  }

};
</script>

<style scoped>
	.info-box {
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
	}
	
	.info-box .title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.info-item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 30rpx;
		font-size: 30rpx;
	}
	
	.info-title {
	  width: 200rpx;
	}
	
	.info-content {
		flex: 1;
	    word-break: break-word;
	    text-align: left;
	}
	
	.current-page-bgcolor {
		background-color: #ededed;
	}

	.enterprise-info-top {
		/* height: 650rpx; */
		background-color: #fffdfe;
		padding: 30rpx 40rpx;
		border-radius: 10rpx;
	}

	.enterprise-info-top-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx #efeeee  solid;
	}

	.os-job-name {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.os-job-name2 {
		font-size: 32rpx;
		font-weight: bold;
		width: 400rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.avatar-shadow {
		border-radius: 10rpx;
		box-shadow: 0 5rpx 5rpx 0rpx #ebebeb;
	}

	.brand-title {
		font-size: 32rpx;
		font-weight: bold;
		height: 100rpx;
		line-height: 100rpx;
	}

	.brand-content {
		display: flex;
		overflow-x: scroll;
		height: 320rpx;
	}

	.brand-content-item {
		width: 200rpx;
		height: 300rpx;
		background-color: #ffffff;
		/* border-radius: 10rpx; */
		box-shadow: 0 5rpx 5rpx 0rpx #ebebeb;
	}

	.brand-goods-title {
		width: 200rpx;
		font-size: 28rpx;
		text-align: center;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.similar-enterprise {
		padding: 50rpx 0rpx 20rpx 0rpx;
	}

	.similar-enterprise-top {
		width: 95%;
		margin: 0 auto;
		height: 300rpx;
		background-color: #fffdfe;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		box-shadow: 5rpx 5rpx 10rpx 5rpx #f3f2f2eb;
	}

	.similar-enterprise-top-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.brand-text {
		font-size: 32rpx;
		padding-left: 16rpx;
	}
	
	.u-page-custom {
		position: relative;
		min-height: 100%;
		height: auto;
	}

</style>